<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>菜单管理</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" language="javascript">
	$(function(){
		$("#treeGrid").treegrid({
			method:'GET',
			url:'${pageContext.request.contextPath }/treegrid?parentId=-1',
			onLoadSuccess:function(){
				$("#treeGrid").treegrid("expandAll") ;
			}
		}) ;
		
		$("#addBtn").click(function(){
			var row = $("#treeGrid").treegrid("getSelected") ;
			if(row == null) {
				$.messager.alert("系统提示","请选择一个父节点") ;
			} else {
				clearForm() ;
				parentId = row.id ;
				$("#updateDlg").dialog("open").dialog("setTitle","添加菜单") ;
			}
			return false ;
		}) ;
		
		$("#editBtn").click(function(){
			var row = $("#treeGrid").treegrid("getSelected") ;
			if(row == null) {
				$.messager.alert("系统提示","请选择一个节点") ;
			} else {
				clearForm() ;
				$("#authid").val(row.id) ;
				$("#authname").val(row.text) ;
				$("#iconCls").val(row.iconCls) ;
				$("#authpath").val(row.attributes) ;
				$("#authdescription").val(row.authdescription) ;
				parentId = "" ;
				$("#updateDlg").dialog("open").dialog("setTitle","修改菜单") ;
			}
			return false ;
		}) ;
				
		$("#removeBtn").click(function(){
			//获取当前节点
			var row = $("#treeGrid").treegrid("getSelected") ;
			//获取当前节点的父节点
			var parentRow = $("#treeGrid").treegrid("getParent",row.id) ;
			if(row == null) {
				$.messager.alert("系统提示","请选择一个节点") ;
			}else {
				$.messager.confirm("系统提示","您确定要删除此节点吗",function(r){
					if(r) {
						$.ajax({
							type:'POST',
							url:'${pageContext.request.contextPath }/removeAuth',
							data:{
								authId:row.id,
								parentId:parentRow.id
							},
							success:function(data) {
								$.messager.alert("系统提示",data.data) ;
								$("#treeGrid").treegrid("load") ;
							}
						}) ;
					}
				}) ;
			}
			return false ;
		}) ;
		
		$("#comfireBtn").click(function(){
			var flag = $("#fm").form("validate") ;
			if(flag) {
				var authid = $("#authid").val() ;
				var authname = $("#authname").val() ;
				var iconCls = $("#iconCls").val() ;
				var authpath = $("#authpath").val() ;
				var authdescription = $("#authdescription").val() ;
				$.ajax({
					type:'POST',
					data:{
						authid:authid,
						authname:authname,
						iconcls:iconCls,
						authpath:authpath,
						authdescription:authdescription,
						parentid:parentId
					},
					url:'${pageContext.request.contextPath }/updateAuth',
					success:function(data){
						$.messager.alert("系统提示",data.data) ;
						$("#treeGrid").treegrid("load") ;
						$("#updateDlg").dialog("close") ;
					}
				}) ;
			}
			return false ;
		}) ;
		
	}) ;
	
	function formatterIcon(value,row,index) {
		return "<div class=" + value + ">&nbsp;</div>";
	}
	
	function clearForm() {
		$("#authid").val("") ;
		$("#authname").val("") ;
		$("#iconCls").val("icon-item") ;
		$("#authpath").val("") ;
		$("#authdescription").val("") ;
	}
</script>
</head>
<body style="margin: 1px;">

	<table id="treeGrid" class="easyui-treegrid" data-options="
		title:'菜单管理',
		fitColumns:true,
		fit:true,
		rownumbers:true,
		idField:'id',
		treeField:'text',
		toolbar:'#tb'
		">
			<thead>
				<tr>
					<th field="id" hidden>id</th>
					<th field="text" width="80" align="left">菜单名称</th>
					<th field="iconCls" width="35" formatter="formatterIcon" align="center">图标</th>
					<th field="attributes" width="100" align="left">链接地址</th>
					<th field="authdescription" width="100" align="left">备注</th>
				</tr>
			</thead>
	</table>
	
	<div id="tb">
		<div>
			<a id="addBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加菜单</a>
			<a id="editBtn" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改菜单</a>
			<a id="removeBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除菜单</a>
		</div>
	</div>
	
	<div id="updateDlg" class="easyui-dialog" style="width: 400px;height: 260px;padding: 10px;"
		data-options="modal:true,closed:true,buttons:'#dlg-buttons',iconCls:'icon-edit'">
		<form id="fm" style="margin-top: 5px;margin-left: 50px;">
			<input type="hidden" name="authid" id="authid" />
			<table>
				<tr>
					<td align="left">菜单名称：</td>
					<td><input class="easyui-validatebox input" id="authname" name="authname" data-options="required:true"/></td>
				</tr>
				<tr>
					<td align="left">菜单样式：</td>
					<td><input class="easyui-validatebox input" id="iconCls" name="iconCls" data-options="required:true"/></td>
				</tr>
				<tr>
					<td align="left">链接：</td>
					<td><input class="easyui-validatebox input" id="authpath" name="authpath"/></td>
				</tr>
				<tr>
					<td align="left">备注：</td>
					<td><textarea rows="3" cols="21" id="authdescription" name="authdescription"></textarea></td>
				</tr>
			</table>
		</form>
	</div>
	<div id="dlg-buttons">
		<a class="easyui-linkbutton" id="comfireBtn" data-options="iconCls:'icon-ok'">确认</a>
	</div>

</body>
</html>